<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<title></title>
    <%@include file="/WEB-INF/common/hplus-css.jsp"%>
    <%@include file="/WEB-INF/common/hplus-js.jsp" %>
<%--    <link href="${path}/assets/js/plugins/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css">--%>

</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox">
                    <div class="ibox-content">
                        <form action="${path}/material/add" class="form-horizontal m-t" id="userForm" method="post" enctype="multipart/form-data">
                            <input name="id" id="id" type="hidden">
                            <div class="form-group">
                                <label class="col-sm-3 control-label"><span>*</span>名称：</label>
                                <div class="col-sm-6">
                                    <input name="name" type="text" class="form-control" aria-required="true"  required="required">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label"><span>*</span>备注：</label>
                                <div class="col-sm-6">
                                    <input type="text"  name="remark"   class="form-control" aria-required="true"  required="required">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label"><span >*</span>上传：</label>
                                <div class="col-sm-2">
                                    <button class="btn btn-success " onclick="fileclick()" type="button">
                                        <i class="fa fa-upload"></i>&nbsp;&nbsp;<span class="bold">上传</span>
                                    </button>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-3 control-label"></label>
                                <div class="col-sm-4">
                                   <img id="img-h" style="width: 250px;height: 150px;display:none;">
                                </div>
                            </div>

                            <div class="form-group" style="text-align: center">
                                <div class="col-sm-4 col-sm-offset-3" style="text-align: center">
                                    <button class="btn btn-primary" id="add-btn" type="button">提交</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <form id="img" action="${path}/file/uploadimage" style="display: none">
        <input type="file" id="file" onchange="upload(this.value,this)" name="file">
    </form>
    <%@include file="/WEB-INF/common/hplus-suggest-js.jsp"%>
    <!--手机号 生分证，表单校验插件 -->
<script src="${pageContext.request.contextPath}/assets/js/validate/dist/additional-methods.js"></script>
    
    <script src="${path}/assets/hplus/js/demo/form-validate-demo.js"></script>
    <script>

            $("#add-btn").click(function() {
            	var valid = $("#userForm").valid();

            	if(valid) {

            	    if ($("#icon").val()==''){
            	        layer.msg("没有上传图片",{icon:5})
            	        return ;
                    }

            		$("#userForm").ajaxSubmit({
                        dataType: "json",
                        success: function (json) {
                            var code = json.code;
                            if(code == 0){
                            	layer.msg(json.msg, {icon: 1});
                                setTimeout(function(){
                                	window.parent.location.reload();
                                	parent.parent.layer.closeAll();
                                }, 1000);
                            }else{
                            	layer.msg(json.msg, {icon: 5,time:2000});
                            }
                        },
                        error:function(){
                        	layer.msg('添加发生错误', {icon: 5});
                        }
                    });
            	}else{
            		layer.msg("请填写完整信息！！！！", {
						icon : 5
					});
            	}
        });


            function fileclick() {
                $('#file').click();
            }
            function upload(val,obj){

                var file = obj.files[0];
                console.log(obj);console.log(file);
                console.log("file.size = " + file.size);  //file.size 单位为byte

                var reader = new FileReader();

                //读取文件过程方法
                reader.onloadstart = function (e) {
                    console.log("开始读取....");
                }
                reader.onprogress = function (e) {
                    console.log("正在读取中....");
                }
                reader.onabort = function (e) {
                    console.log("中断读取....");
                }
                reader.onerror = function (e) {
                    console.log("读取异常....");
                }
                reader.onload = function (e) {
                    console.log("成功读取....");

                    var img = document.getElementById("img-h");
                    $("#img-h").show();
                    img.src = e.target.result;
                    //或者 img.src = this.result;  //e.target == this
                }

                reader.readAsDataURL(file)

                $("#i").val(val);
                $("#img").ajaxSubmit({
                    type:'POST',
                    dataType:'json',
                    success:function (json) {
                        var code = json.code;
                        var id = json.id;
                        if (code ==0){
                            $("#id").val(id);
                            layer.msg(json.msg,{icon:1})
                        }else {
                            layer.msg(json.msg,{icon:5})
                        }

                    }


                });
            }

    </script>

</body>
</html>
